<template>
<a-drawer :visible="dataVisible" width="70%" title="#添加派送单" class="gt-drawer send-order-info" @cancel="dataVisible = false"
        :footer="false"
        unmount-on-close>
        <div>
          <a-collapse :default-active-key="['1']" class="g-collapse">
            <a-collapse-item header="基础信息" key="1">
              <a-collapse :default-active-key="['1']" class="g-collapse">
                <div v-for="shipment in shipmentList">
                  <ma-info :columns="infoColumns"  :column="4" :data="shipment" layout="horizontal" size="small"/>
                </div>
              </a-collapse>
        </a-collapse-item>
      </a-collapse>
      <a-card :style="{ width: '100%' }" title="分组">
        <a-space size="large">

          <a-checkbox-group :default-value="['1']" v-model="groupType">
            <a-checkbox value="2">超尺寸/超重</a-checkbox>
            <a-checkbox value="3">超大件</a-checkbox>
          </a-checkbox-group>
        </a-space>
        <template #extra>
          <a-radio-group type="button" size="" v-model="sendType">
            <a-radio value="1" default-checked="true">美西</a-radio>
            <a-radio value="2">美东</a-radio>
          </a-radio-group>
          <a-button type="primary" @click="Comparison()">比价</a-button>
        </template>
      </a-card>
          <a-row class="grid-demo" :gutter="24">
            <a-col :span="8">
              <a-list>
                <template #header>
                  <p>普通</p>
                  <a-space direction="vertical" :size="16" style="display: block;">
                    <a-row>
                      <a-col :span="6">
                        <div>货箱：{{list1.length}}</div>
                      </a-col>
                    </a-row>
                  </a-space>
                </template>
              <draggable v-model="list1" :item-key="getItemKey" group="myGroup" tag="ul" class="drag-list">
                <template #item="{ element }">
                  <a-list-item>
                    <a-row :gutter="24" >
                      <a-col :span="12">
                        {{element.length}}*{{ element.width}}*{{ element.height}}
                      </a-col>
                      <a-col :span="6">
                        {{element.weight}}
                      </a-col>
                      <a-col :span="6">
                        <a-tag v-if="element.type == 1">普</a-tag>
                        <a-tag v-if="element.type == 2" color="arcoblue">大</a-tag>
                        <a-tag v-if="element.type == 3" color="red">超</a-tag>
                      </a-col>
                    </a-row>
                  </a-list-item>
                </template>
              </draggable>
            </a-list>
            </a-col>
            <a-col :span="8">
              <a-list>
                <template #header>
                  <p>超尺寸超重</p>
                  <a-space direction="vertical" :size="16" style="display: block;">
                    <a-row>
                      <a-col :span="6">
                        <div>货箱：{{list2.length}}</div>
                      </a-col>
                    </a-row>
                  </a-space>
                </template>
              <draggable v-model="list2" :item-key="getItemKey" group="myGroup" tag="ul" class="drag-list">
                <template #item="{ element }">
                  <a-list-item>
                    <a-row :gutter="24" >
                      <a-col :span="12">
                        {{element.length}}*{{ element.width}}*{{ element.height}}
                      </a-col>
                      <a-col :span="6">
                        {{element.weight}}
                    </a-col>
                    <a-col :span="6">
                      <a-tag v-if="element.type == 1">普</a-tag>
                      <a-tag v-if="element.type == 2" color="arcoblue">大</a-tag>
                      <a-tag v-if="element.type == 3" color="red">超</a-tag>
                    </a-col>
                    </a-row>
                  </a-list-item>
                </template>
              </draggable>
            </a-list>
            </a-col>
            <a-col :span="8">
              <a-list>
                <template #header>
                  <p>超大件</p>
                  <a-space direction="vertical" :size="16" style="display: block;">
                    <a-row>
                      <a-col :span="6">
                        <div>货箱：{{list3.length}}</div>
                      </a-col>
                    </a-row>
                  </a-space>
                </template>
              <draggable v-model="list3" :item-key="getItemKey" group="myGroup" tag="ul" class="drag-list">
                <template #item="{ element }">
                  <a-list-item>
                    <a-row :gutter="24" >
                      <a-col :span="12">
                        {{element.length}}*{{ element.width}}*{{ element.height}}
                      </a-col>
                      <a-col :span="6">
                        {{element.weight}}
                    </a-col>
                    <a-col :span="6">
                      <a-tag v-if="element.type == 1">普</a-tag>
                      <a-tag v-if="element.type == 2" color="arcoblue">大</a-tag>
                      <a-tag v-if="element.type == 3" color="red">超</a-tag>
                    </a-col>
                    </a-row>
                  </a-list-item>
                </template>
              </draggable>
            </a-list>
            </a-col>
          </a-row>
        </div>
        <price-comparison ref="priceComparison" />
</a-drawer>
  </template>
  
  <script setup>
  import {computed, inject, provide, ref, watch,reactive} from "vue";
  import draggable from "vuedraggable";
  import MaInfo from "@/components/ma-info/index.vue"
  import parcel from "@/api/document/parcel"
  import shipment from "@/api/document/shipment"
  import PriceComparison from "@/views/document/shipment/components/actions/PriceComparison.vue"
  import {Message} from "@arco-design/web-vue";
  const dataVisible = ref(false)
  const record = inject('record',{id:null,})
  const shipmentList = ref([])
  const crudRef = inject('crudRef')
  const groupType = ref([])
  const parcelList = ref([])
  const shipment_ids = ref([])
  const priceComparison = ref()
  const sendType = ref('1')
  watch(groupType,(newValue)=>{
    console.log(newValue)
    allocation()
  })
  const list1 = ref([]);
  const list2 = ref([]);
  const list3 = ref([]);
const getParcels = async () =>{

  parcelList.value = await parcel.getAllList({shipment_id:shipment_ids.value.join(','),send_order_id:0})
  if(parcelList.value.success){
    list1.value = []
    groupType.value = []
    parcelList.value.data.map(i=>{
      i = checkSize(i)
      list1.value.push({
        weight:i.actual_weight,type:i.size,
        length:i.actual_length,width:i.actual_width,height:i.actual_height
      })
      return i
    })
  }else{
    Message.error('获取货箱失败')
  }
}

const allocation = () =>{
  list1.value = []
  list2.value = []
  list3.value = []
  parcelList.value.data.map(i=>{
      if(i.size == 2 && groupType.value.includes('2')){
        list2.value.push({
          id:i.id,shipment_id:i.shipment_id,
          weight:i.actual_weight,type:i.size,
          length:i.actual_length,width:i.actual_width,height:i.actual_height
        })
        return i
      }
      if(i.size == 3 && groupType.value.includes('3')){
        list3.value.push({
          id:i.id,shipment_id:i.shipment_id,
          weight:i.actual_weight,type:i.size,
          length:i.actual_length,width:i.actual_width,height:i.actual_height
        })
        return i
      }
      list1.value.push({
        id:i.id,shipment_id:i.shipment_id,
        weight:i.actual_weight,type:i.size,
        length:i.actual_length,width:i.actual_width,height:i.actual_height
      })
    })
}

const getItemKey = (item) => {
      return item.id; // 假设每个列表项都有一个唯一的 id
    };
const onShow = async () => {
      dataVisible.value = true
      if(record.value.merge_id > 0){
        let res = await shipment.getList({merge_id:record.value.merge_id,scence:'merge'})
        shipmentList.value = res.data.items
      }else{
        shipmentList.value = [record.value]
      }
      shipmentList.value.map(i=>{
          shipment_ids.value.push(i.id)
        })
      await getParcels()
  }
  const infoColumns = ref([
    { title: '运单号', dataIndex: 'shipment_no'},
    { title: '货箱总数', dataIndex: 'volume_weight.parcel_count'},
    { title: '总重量', dataIndex: 'volume_weight.actual_weight'},
    { title: '总体积', dataIndex: 'volume_weight.actual_volume'},
  ])

//重量
// < 22            普通
//22 < 70          大
// > 70            超大
//尺寸
// 最长边 < 70  且 三边和*2-长 < 260   普通
//三边和*2-长 < 330    大
//三边和*2-长 > 330    超大
const checkSize = (item) =>{
  if(item.actual_length < 70 && item.actual_width < 70 && item.actual_height < 70 && calculateSize(item,260)){
     item.size = 1
  }else{
    item.size = calculateSize(item,330) ? 2 : 3
  }
  
  if(item.actual_weight >= 22 && item.size == 1){
    item.size = 2
  }
  return item
}  

const calculateSize = (item,size) =>{
    let actual_length = parseFloat(item.actual_length)
    let actual_width = parseFloat(item.actual_width)
    let actual_height = parseFloat(item.actual_height)
    return (( actual_length + actual_width + actual_height)*2 - Math.max(actual_length, actual_width, actual_height) ) < size
}

const Comparison = () =>{
  if(parcelList.value.data.length <= 0){
    Message.error('货箱总数为空')
    return
  }
  priceComparison.value.onShow({p:list1.value,d:list2.value,c:list3.value},record.value,sendType.value)
}
provide('getParcels',getParcels);
defineExpose({onShow,getParcels})
  </script>

<style scoped>
.send-order-info .arco-list-wrapper{
  background-color: #fff;
}
 .drag-list{
    overflow-y: scroll !important;
    height: 500px;
}

.send-order-info .arco-list-item {
  color: var(--color-text-1);
  font-size: 14px;
  line-height: 2.5;
  padding: 4px 20px;
}
</style>
  
  